<template>
    <button class="backtop" v-show="showButton" @click="scrollToTop">
      ⬆️
    </button>
  </template>
  
  <script>
  export default {
    data() {
      return {
        showButton: false,
      };
    },
    mounted() {
      window.addEventListener("scroll", this.checkScrollPosition);
    },
    beforeUnmount() {
      window.removeEventListener("scroll", this.checkScrollPosition);
    },
    methods: {
      checkScrollPosition() {
        const scrollPosition =
          window.pageYOffset || document.documentElement.scrollTop;
        this.showButton = scrollPosition > 200;
      },
      scrollToTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      },
    },
  };
  </script>
  
  <style scoped>
  .backtop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 28px;
    padding: 0px;
    border: 1px solid white;
  }
  </style>
  